<template>
  <div id="photo-share-detail">
    <top-header :title="title" :isRoute="isRoute" />
    <!-- 缩略图列表 -->
    <div class="image-list">
      <vue-preview :slides="imageList"></vue-preview>
    </div>
    <!-- 图文分享详情 -->
    <div class="photo-share-info">
      <h3 class="title">{{photoShareDetail.title}}</h3>
      <p class="small-title">
        <span>点击次数：{{photoShareDetail.click}}</span>
        <span>{{photoShareDetail.add_time | formatDate}}</span>
      </p>
      <hr />
      <div v-html="photoShareDetail.content" class="content"></div>
      <!-- 做一个跳转评论组件的按钮 -->
      <mt-button type="primary" style="width:10rem;" @click="goComment">点击评论</mt-button>
    </div>
  </div>
</template>
<script>
import "./index.less";
import { map } from "lodash";
import { userData, middleVue } from "../../services";
export default {
  data() {
    return {
      photoShareDetail: {},
      imageList: [],
      title: "",
      isRoute: true
    };
  },
  methods: {
    goComment() {
      if (userData.getUserData()) {
        this.$router.push({
          name: "comment",
          query: {
            photoShareId: this.photoShareDetail.id
          }
        });
      } else {
        middleVue.$emit("openLoginRegist", true);
      }
    }
  },
  created() {
    // this.$axios
    //   .get("getimageInfo/" + this.$route.params.id)
    //   .then(res => {
    //     this.photoShareDetail = res.data.message;
    //     console.log(this.photoShareDetail);
    //   })
    //   .catch(err => console.log(err));
    this.$axios
      .all([
        this.$axios.get("getthumimages/" + this.$route.params.id),
        this.$axios.get("getimageInfo/" + this.$route.params.id)
      ])
      .then(
        this.$axios.spread((resImages, resInfo) => {
          this.imageList = resImages.data.message;
          map(this.imageList, item => {
            item.msrc = item.src;
            item.w = 600;
            item.h = 400;
          });
          this.photoShareDetail = resInfo.data.message;
          this.title = resInfo.data.message.title;
          this.title = this.title.substring(0, 6);
        })
      )
      .catch();
  }
};
</script>
